*,
html,
body{
    padding: 0;
    margin: 0;

    font-family: Open Sans;
}


body{
    scroll-behavior: smooth;
}

/* Navbar START */
    header{
        width: 100%;
        background-color: #fff;
        /* background-color: #6D2CF2; */

    }

    header nav{
        padding: 10px;
    }

    header nav ul{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        box-sizing: border-box;
    }

    header nav ul li{
        list-style-type: none;
        align-content: center;

    }

        /* Judul */
        header nav ul li .judul-img img{
            width: 46px;
            /* background-color: white; */
            border-radius: 100px;

            text-align: center;
        }

        header nav ul li .judul-img .logo{
            display: flex;
        }

            /* Text */
                header nav ul li .judul-img p{
                    color: black;
                    margin-left: 10px;
                    align-content: center;

                }
            /* Text */

            /* Active */
                header nav ul li .active{
                    color: black;
                }
            /* Active */



        /* Judul */


        /* Menu */
            header nav ul li a{
                color: #AEB2B6;
                margin: 10px;
                
                text-decoration: none;
            }

            header nav ul li a:hover{
                color: black;
            }
        /* Menu */
/* Navbar END */




/* Main START */
    main{
        color: white;
        width: 100%;
        background-color: #E7EFFC;
        /* background-color: #212529; */
    }

    main .container{
        padding: 10px;
    }

    main .container ul{
        display: unset;
        justify-content: center;
        flex-wrap: wrap;
    }

        /* Column main START */
            .column-main{
                width: 100%;
                flex: 3;
                order: 2;
            }

                /* Hero Parent START */
                    .column-main .hero-parent{
                    }
                    
                    .column-main .hero-parent .container{
                        
                    }

                    .column-main .hero-parent .container ul{
                        
                    }
                    
                    .column-main .hero-parent .container ul img{
                        min-width: 50%;
                        max-width: 100%;
                        
                        border-radius: 12px;
                        
                        object-fit: cover;
                    }
                /* Hero Parent END */



                    /* Hero Child START */
                        .hero-child{
                            width: 100%;
                        }

                        .hero-child .container{
                            padding: 10px;
                        }

                        .hero-child .container ul{
                            display: flex;
                            justify-content: center;
                            
                        }

                            /* Card */

                                /* Card 1 */
                                    .hero-child .container ul .card-1{
                                    }

                                    .hero-child .container ul .card-1 .container{
                                        padding: 10px;
                                        margin: 10px 10px;
                                        background-color: black;
                                    }

                                    .hero-child .container ul .card-1 .container a{
                                        background-color: white;
                                        
                                        transition: all ease-in-out 550ms;
                                    }

                                        .hero-child .container ul .card-1 .container a:hover{
                                            opacity: 50%;

                                            background-color: black;
                                            transition: all ease-in 50ms;
                                        }

                                    .hero-child .container ul .card-1 .container a img{
                                        min-width: 100px;
                                        max-width: 300px;

                                        min-height: 100px;
                                        max-height: 200px;

                                        object-fit: cover;
                                    }
                                /* Card 1 */


                                
                                /* Card 2 */
                                    .hero-child .container ul .card-2{
                                    }

                                    .hero-child .container ul .card-2 .container{
                                        padding: 10px;
                                        margin: 10px 10px;
                                        background-color: black;
                                    }

                                    .hero-child .container ul .card-2 .container a{
                                        background-color: white;
                                        
                                        transition: all ease-in-out 550ms;
                                    }

                                        .hero-child .container ul .card-2 .container a:hover{
                                            opacity: 50%;

                                            background-color: black;
                                            transition: all ease-in 50ms;
                                        }

                                    .hero-child .container ul .card-2 .container a img{
                                        min-width: 100px;
                                        max-width: 300px;

                                        min-height: 100px;
                                        max-height: 200px;

                                        object-fit: cover;
                                    }
                                /* Card 2 */



                                /* Card 3 */
                                    .hero-child .container ul .card-3{

                                    }

                                    .hero-child .container ul .card-3 .container{
                                        padding: 10px;
                                        margin: 10px 10px;
                                        background-color: black;
                                    }

                                    .hero-child .container ul .card-3 .container a{
                                        background-color: white;
                                        
                                        transition: all ease-in-out 550ms;
                                    }

                                        .hero-child .container ul .card-3 .container a:hover{
                                            opacity: 50%;

                                            background-color: black;
                                            transition: all ease-in 50ms;
                                        }

                                    .hero-child .container ul .card-3 .container a img{
                                        min-width: 100px;
                                        max-width: 300px;

                                        min-height: 100px;
                                        max-height: 200px;

                                        object-fit: cover;
                                    }
                                /* Card 3 */



                                /* Card 3 */
                                    .hero-child .container ul .card-4{

                                    }

                                    .hero-child .container ul .card-4 .container{
                                        padding: 10px;
                                        margin: 10px 10px;
                                        background-color: black;
                                    }

                                    .hero-child .container ul .card-4 .container a{
                                        background-color: white;
                                        
                                        transition: all ease-in-out 550ms;
                                    }

                                        .hero-child .container ul .card-4 .container a:hover{
                                            opacity: 50%;
                                            background-color: black;
                                            transition: all ease-in 50ms;
                                        }

                                    .hero-child .container ul .card-4 .container a img{
                                        min-width: 100px;
                                        max-width: 300px;

                                        min-height: 100px;
                                        max-height: 200px;

                                        object-fit: cover;
                                    }
                                /* Card 3 */


                                

                            /* Card */

                    /* Hero Child END */









                /* Genshin Impact START */
                    .genshin {
                        width: 100%;
                    }
                    
                    .genshin .container {
                        padding: 10px;
                    }
                    
                    .genshin .container ul {
                        display: flex;
                        justify-content: center;
                    }
                    
                        /* Header Content */
                        .genshin .container ul .header-content {
                            background-color: white;
                        }
                        
                        .genshin .container ul .header-content .container {
                            padding: 10px;
                        }

                        .genshin .container ul .header-content .container ul{
                            display: flex;
                            justify-content: space-around;
                            flex-wrap: nowrap;
                        }
                        
                        .genshin .container ul .header-content .container img {
                            min-width: 100px;
                            max-width: 100px;
                            
                            
                            min-height: 50%;
                            max-height: 100%;
                            object-fit: cover;
                        }
                        /* Header Content */

                            /* section text */
                                .genshin .container ul .header-content .container .section-text{
                                    min-width: 100px;
                                    min-width: 200px;

                                }

                                .genshin .container ul .header-content .container .section-text h3{
                                    color: black;
                                }

                                .genshin .container ul .header-content .container .section-text p{
                                    color: black;
                                    margin: 10px;
                                }
                            /* section text */
                    
                /* Genshin Impact END */



                /* Honkai Impact START */
                    .honkai {
                        width: 100%;
                    }
                    
                    .honkai .container {
                        padding: 10px;
                    }
                    
                    .honkai .container ul {
                        display: flex;
                        justify-content: center;
                    }
                    
                        /* Header Content */
                        .honkai .container ul .header-content {
                            background-color: white;
                        }
                        
                        .honkai .container ul .header-content .container {
                            padding: 10px;
                        }

                        .honkai .container ul .header-content .container ul{
                            display: flex;
                            justify-content: space-around;
                            flex-wrap: nowrap;
                        }
                        
                        .honkai .container ul .header-content .container img {
                            min-width: 100px;
                            max-width: 100px;
                            
                            
                            min-height: 50%;
                            max-height: 100%;
                            object-fit: cover;
                        }
                        /* Header Content */

                            /* section text */
                                .honkai .container ul .header-content .container .section-text{
                                    min-width: 100px;
                                    min-width: 200px;

                                }

                                .honkai .container ul .header-content .container .section-text h3{
                                    color: black;
                                }

                                .honkai .container ul .header-content .container .section-text p{
                                    color: black;
                                    margin: 10px;
                                }
                            /* section text */
                    
                /* Honkai Impact END */



                /* Honkai Star Rail START */
                    .hsr {
                        width: 100%;
                    }
                    
                    .hsr .container {
                        padding: 10px;
                    }
                    
                    .hsr .container ul {
                        display: flex;
                        justify-content: center;
                    }
                    
                        /* Header Content */
                        .hsr .container ul .header-content {
                            background-color: white;
                        }
                        
                        .hsr .container ul .header-content .container {
                            padding: 10px;
                        }

                        .hsr .container ul .header-content .container ul{
                            display: flex;
                            justify-content: space-around;
                            flex-wrap: nowrap;
                        }
                        
                        .hsr .container ul .header-content .container img {
                            min-width: 100px;
                            max-width: 100px;
                            
                            
                            min-height: 50%;
                            max-height: 100%;
                            object-fit: cover;
                        }
                        /* Header Content */

                            /* section text */
                                .hsr .container ul .header-content .container .section-text{
                                    min-width: 100px;
                                    min-width: 200px;

                                }

                                .hsr .container ul .header-content .container .section-text h3{
                                    color: black;
                                }

                                .hsr .container ul .header-content .container .section-text p{
                                    color: black;
                                    margin: 10px;
                                }
                            /* section text */
                    
                    /* Honkai Star Rail END */




                /* Zenless Zone Zero START */
                    .zzz {
                        width: 100%;
                    }
                    
                    .zzz .container {
                        padding: 10px;
                    }
                    
                    .zzz .container ul {
                        display: flex;
                        justify-content: center;
                    }
                    
                        /* Header Content */
                        .zzz .container ul .header-content {
                            background-color: white;
                        }
                        
                        .zzz .container ul .header-content .container {
                            padding: 10px;
                        }

                        .zzz .container ul .header-content .container ul{
                            display: flex;
                            justify-content: space-around;
                            flex-wrap: nowrap;
                        }
                        
                        .zzz .container ul .header-content .container img {
                            min-width: 100px;
                            max-width: 100px;
                            
                            
                            min-height: 50%;
                            max-height: 100%;
                            object-fit: cover;
                        }
                        /* Header Content */

                            /* section text */
                                .zzz .container ul .header-content .container .section-text{
                                    min-width: 100px;
                                    min-width: 200px;

                                }

                                .zzz .container ul .header-content .container .section-text h3{
                                    color: black;
                                }

                                .zzz .container ul .header-content .container .section-text p{
                                    color: black;
                                    margin: 10px;
                                }
                            /* section text */
                    
                /* Zenless Zone Zero END */





        /* Column main END */




        /* Sidebar Second START */
            .sidebar-second{
                width: 100%;
                flex: 1;
                order: 1;
                background-color: #BFD7FD;
                /* background-color: #1B1F22; */

            }

            .sidebar-second .container{
                /* position: unset; */
                padding: 10px;
                
            }

            .sidebar-second .container h3{
                color: black;
            }

            .sidebar-second .container ul{
                display: block;
                padding: 10px;
            }

            .sidebar-second .container ul li{
                display: flex;

            }

                /* Link */
                            /* Active */
                                .sidebar-second .container ul li .active-second{
                                    color: black;
                                    background-color: #fff;

                                    border-radius: 4px;
                                }
                            /* Active */


                    .sidebar-second .container ul li a{
                        color: black;


                        padding: 5px;
                        text-decoration: none;
                    }

                    .sidebar-second .container ul li a:hover{
                        color: black;
                        background-color: #fff;

                        border-radius: 4px;
                    }
                /* Link */
        /* Sidebar Second END */




        /* Sidebar Third START */
            .sidebar-third{
                width: 100%;
                flex: 1;
                order: 3;
                background-color: #BFD7FD;
                /* background-color: #1B1F22; */
            }

            .sidebar-third .container{
                position: unset;
                padding: 10px;
            }

            .sidebar-third .container h3{
                color: black;
            }

            .sidebar-third .container ul{
                
                display: block;
                padding: 10px;
            }

            .sidebar-third .container ul li{
                list-style-type: none;
                
            }

                /* Link */
                            /* Active */
                            .sidebar-third .container ul li .active-third{
                                color: white;
                                border-left: 2px solid white;
                            }
                        /* Active */


                    .sidebar-third .container ul li a{
                        color: black;

                        padding: 5px;
                        text-decoration: none;
                    }

                    .sidebar-third .container ul li a:hover{
                        color: white;
                        border-left: 2px solid white;
                    }
                /* Link */
        /* Sidebar Third END */
/* Main END */




/* Footer START */
    footer{
        width: 100%;
        background-color: #fff;
    }

    footer .container{
        padding: 10px;
    }

    footer .container p{
        color: black;
        text-align: center;
    }
/* Footer END */


/* Responsive  */
@media( min-width: 900px){ /*arti dari @media dengan property dan value min-width: 600px;*/

    main .container ul{
        display: flex;
        justify-content: center;
    }

    .sidebar-third .container{
        position: fixed;
        padding: 10px;
    }

    .sidebar-second .container{
        position: fixed;
        padding: 10px;
    }




    .genshin .container ul .header-content .container img {
        min-width: 50%;
        max-width: 100%;


        min-height: 100px;
        max-height: 300px;
        object-fit: cover;
    }


    .honkai .container ul .header-content .container ul img{
        min-width: 50%;
        max-width: 100%;

        min-height: 100px;
        max-height: 300px;
        object-fit: cover;
        
    }

    .hsr .container ul .header-content .container ul img{
        min-width: 50%;
        max-width: 100%;

        min-height: 100px;
        max-height: 300px;
        object-fit: cover;        
    }

    .zzz .container ul .header-content .container ul img{
        min-width: 50%;
        max-width: 100%;

        min-height: 100px;
        max-height: 300px;
        object-fit: cover;
    }






}

/* Responsive  */

















/* Arrow Up START */
.arrow{
    width: 100%;
    position: fixed;
    bottom: 0;
}

.arrow .container{
    padding: 40px;
}

.arrow .container ul{
    display: flex;
    justify-content: end;
}

.arrow .container a{
    color: white;
    padding: 10px;
    background-color: black;
}.arrow .container a:hover{
    background-color: gray;
}